<template>
  <div class="container" v-if="operateInfo.isShow">
    <div class="box">
      <n-icon class="icon" @click="operateInfo.isShow = false">
        <CloseCircleOutlined />
      </n-icon>
      <div class="title">{{ handleTitle(menuInfo.type) }}</div>

      <div class="create-box" v-if="menuInfo.type === 'create'">
        <input class="input" type="text" v-model.trim="operateInfo.songMenuName" placeholder="输入歌单名称" />
      </div>

      <div class="join-box" v-if="menuInfo.type === 'add'">
        <div class="menu" v-for="(menuName, i) in songMenuNameList" :key="i" @click="joinMenu(menuName)">
          <img :src="defaultImg" class="menuImg" />
          <span class="menuName">{{ menuName }}</span>
        </div>
      </div>

      <div class="edit-box" v-if="menuInfo.type === 'edit'">
        <div class="title">歌单名称</div>
        <input class="input" type="text" v-model="editInfo.editMenuNewName" />
        <div class="title">歌单图片URL</div>
        <input class="input" type="text" v-model="editInfo.editImgUrl" />
      </div>

      <div v-if="menuInfo.type !== 'add'">
        <button class="btn confirm" @click="operation(menuInfo.type === 'create' ? 'confirmCreate' : 'confirmEdit')">确定</button>
        <button class="btn cancel" @click="operateInfo.isShow = false">取消</button>
      </div>
      <div v-if="menuInfo.type === 'edit'">
        <button class="btn delete" @click="operation('delete')">删除歌单</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted } from 'vue';
import { CloseCircleOutlined } from '@vicons/antd';
import { getSongMenuNameList, joinSongMenu, editMenuInfo, deleteMenu } from '@/utils/songMenu';
import defaultImg from '../../build/icon.png';

function handleTitle(type) {
  switch (type) {
    case 'create':
      return '创建歌单';
    case 'add':
      return '加入歌单';
    case 'edit':
      return '编辑歌单';
  }
}

const operateInfo = reactive({
  isShow: false,
  songMenuName: '',
});

function operation(operate) {
  switch (operate) {
    case 'confirmCreate':
      if (!operateInfo.songMenuName) {
        return;
      }
      const songMenu = localStorage.getObject('songMenu');
      songMenu.push({
        menuName: operateInfo.songMenuName,
        menuImg: defaultImg,
        songList: [],
      });
      localStorage.setObject('songMenu', songMenu);
      operateInfo.isShow = false;
      getMenuNameList();
      break;
    case 'confirmEdit':
      editMenuInfo(editInfo);
      updateMenuInfo({
        newMeunName: editInfo.editMenuNewName,
        newMeunImg: editInfo.editImgUrl,
      });
      operateInfo.isShow = false;
      break;
    case 'delete':
      deleteMenu(editInfo.editMenuOldName);
      operateInfo.isShow = false;
      break;
  }
}

function updateSongMenuNameList() {
  songMenuNameList.value = getSongMenuNameList();
}
defineExpose({
  operateInfo,
  updateSongMenuNameList,
});

const props = defineProps({
  menuInfo: {
    type: Object,
    default: () => ({
      type: 'create',
      songInfo: {},
      editInfo: {},
    }),
  },
});

const songMenuNameList = ref();
function joinMenu(menuName) {
  joinSongMenu(menuName, props.menuInfo.songInfo);
  operateInfo.isShow = false;
}

let getMenuNameList = null;
let updateMenuInfo = null;
onMounted(() => {
  if (props.menuInfo.type === 'create') {
    getMenuNameList = inject('getMenuNameList');
  }
  if (props.menuInfo.type === 'edit') {
    updateMenuInfo = inject('updateMenuInfo');
  }
});

const editInfo = reactive({
  editMenuOldName: '',
  editMenuNewName: '',
  editImgUrl: '',
});
watch(
  () => props.menuInfo.editInfo,
  (newEditInfo) => {
    editInfo.editMenuOldName = newEditInfo.menuName;
    editInfo.editMenuNewName = newEditInfo.menuName;
    editInfo.editImgUrl = newEditInfo.menuImg;
  }
);
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba($color: #000000, $alpha: 0.5);
  z-index: 99;
  .box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    min-height: 210px;
    max-height: 460px;
    padding: 30px;
    border-radius: 10px;
    background-color: #fafafa;
    .icon {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 24px;
    }
    .title {
      margin-bottom: 30px;
      color: #565656;
      font-size: 24px;
      font-weight: 700;
    }
    .btn {
      width: 60px;
      height: 30px;
      border: none;
      border-radius: 3px;
      transition: transform 0.3s linear;
      &:hover {
        transform: scale(1.3);
      }
    }
    .confirm {
      margin-right: 30px;
      background-color: #f0f7ff;
      color: #017afe;
    }
    .delete {
      margin-top: 20px;
      padding: 0 15px;
      box-sizing: content-box;
      background-color: transparent;
      transform: translateX(-150px);
      &:hover {
        color: rgb(245, 59, 59);
        transform: scale(1) translateX(-150px);
      }
    }
    .input {
      width: 300px;
      height: 40px;
      padding-left: 20px;
      background-color: #eeeeee;
      border: none;
      color: #555353;
      margin-bottom: 25px;
      border-radius: 5px;
      &:focus-visible {
        outline: none;
      }
    }
    .create-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .join-box {
      width: 100%;
      max-height: 320px;
      overflow: auto;
      .menu {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        border-radius: 20px;
        &:hover {
          background-color: #e3e3e5;
        }
        .menuImg {
          width: 60px;
          height: 60px;
          margin-left: 20px;
          margin-right: 30px;
        }
        .menuName {
          font-size: 16px;
        }
      }
    }
    .edit-box {
      .title {
        margin-bottom: 10px;
        color: #565656;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }
}
</style>
